<template>
	<view class="tui-content-box">

		<view class="tui-box">
			<view class="yui-store-header">
				<view class="yui-face">
					<image :src="shopinfo.shop_avatar" mode="" class="yui-face-img"></image>
				</view>
				<view class="yui-face-name">
					{{shopinfo.shop_name}}
				</view>
			

			</view>
			<view class="withdraw-box">
				<view class="box-name">金额</view>
				<view class="box-input">
					<view class="ms">￥</view>
					<input placeholder-class="tui-phcolor" class="inputs" @input="inputMoney" placeholder="请输入支付金额"
						maxlength="11" type="text" />
				</view>
			</view>

			<view class="tui-btn-box">
				<tui-button shadow height="88rpx" shape="circle" type="danger" @click="btnSave()">在线支付</tui-button>
			</view>
	
		</view>
	</view>
</template>

<script>
	import {
		wxJsPay,
		isWxBrowser
	} from '@/utils/mixin';
	export default {
		data() {
			return {
				error: true,
				withdraw: null,
				show: false,
				money: '',
				msg: null,
				shopinfo: '',
				noClick: false,
				mch_key:'',
				show: false,
				iswx:'',
				out_trade_no:'',
				shop_id:0
			}
		},
		onLoad: function(options) {
			if (options.shop_id) {
				this.mch_key =options.mch_key
				this.shop_id=options.shop_id
			};
		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			init() {
				let token = this.tui.getToken();
				let datas={
					token: token,
					shop_id:this.shop_id
				}
				let shop = this.tui.request('shop', 'post',datas, 1000, 1, '', 'offlineShop');
				Promise.resolve(shop).then((value) => {
					if (value.code == 200) {
						this.shopinfo = value.data;
					}
				})
			},
			wxPay(data) {
				let that=this;
				if (isWxBrowser()) {
					let obj = {
						appId: data.appId,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
					}
					let callback_succ_func = function() {
						that.tui.toast('支付成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 800)
					};
					let callback_error_func = function() {
						that.tui.toast('支付失败');
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					};
					wxJsPay(obj, callback_succ_func, callback_error_func)
				} else {
					uni.showModal({
						title: "提示",
						content: "请使用微信打开进行支付",
						showCancel: false
					})
				}
			},
			popupClose() {
				this.show = false
			},
			inputMoney: function(e) {
				this.money = e.detail.value;
			},
			
			btnSave() {
				uni.hideLoading();

				if (this.noClick == true) {
					this.tui.toast('请勿重复提交');
					return false;
				}
				this.noClick = true;
				let token = this.tui.getToken();
				let datas = {
					token: token,
					amount: this.money,
					shop_id:this.shop_id
				}
				let account = this.tui.request('shop', 'post', datas, 1000, 1, '', 'offlinePay');
				Promise.resolve(account).then((value) => {
					if (this.pay_type == 2) {
						/* 假如是app的话 */
						//#ifdef APP-PLUS
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: value.data.pay_url,
							success: function(res) {
					
							},
							fail: function(err) {
					
							}
						});
						return;
						//#endif
						// #ifdef H5
						//将接口返回的Form表单显示到页面
						document.querySelector('body').innerHTML = value;
						//调用submit 方法
						document.forms['alipaysubmit'].submit();
						// #endif
					}
					if (value.code == 200) {
						// #ifdef H5
						// let ua = window.navigator.userAgent.toLowerCase()
						// if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						// 	//公众号支付
						// 	this.wxPay(value.data);
						// 	return;
						// }
						if (ua.indexOf('alipayclient') > 0) {
							window.location.href=value.data.pay_url;
							return
							//支付宝扫码
							//将接口返回的Form表单显示到页面
							document.querySelector('body').innerHTML = value;
							//调用submit 方法
							document.forms['alipaysubmit'].submit();
							return;
						}
						//#endif
						if (this.pay_type == 3) {
							uni.navigateTo({
								url: "../success/success?out_trade_no=" + this.out_trade_no
							})
						}
						//#ifdef APP-PLUS
						if(this.pay_type == 1){
							this.tui.toast('支付升级中');
							return;
						}
						
						//#endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							appid: value.data.appId,
							timeStamp: value.data.timeStamp,
							nonceStr: value.data.nonceStr,
							package: value.data.package,
							signType: 'MD5',
							paySign: value.data.paySign,
							success: (res) => {
								uni.showToast({
									title: "支付成功!"
								})
								uni.navigateTo({
									url: "../success/success?out_trade_no=" + this.out_trade_no
								})
							},
							fail: (res) => {
								this.tui.toast("取消支付");
								uni.navigateTo({
									url: "../success/success?out_trade_no=" + this.out_trade_no
								})
							},
							complete: () => {
						
							}
						})
						// #endif
						// #ifdef H5
						location.href = value.data.payInfo;
						// #endif
					} else {
						this.noClick = false;
						this.tui.toast(value.message);
					}
				})
			},
			changeList() {
				uni.navigateTo({
					url: '../user/changeList?type='+this.account_type
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.tui-content-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: relative;
		/* 	top: -72rpx; */
		z-index: 10;
	}
	.yui-store-header{
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #f3f2f2;
	}
	.yui-face-name{
		text-align: center;
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	.yui-face{
	   text-align: center;
	   margin:0 auto;
	}
	.yui-face-img{
		width:100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}

	.tui-box {
		/* 	width: 100%; */
		margin-top: 30rpx;
		background: #fff;
		padding: 36rpx;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-btn-box {
		margin-bottom: 20rpx;
	}

	.withdraw-account {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 10rpx;
		justify-content: center;
		background: #eaeaea;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4e4d4d;
	}

	.withdraw-account-h1 {
		color: #4e4d4d;
		font-weight: bold;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}

	.withdraw-box {
		margin-top: 40rpx;
	}

	.box-name {
		font-size: 26rpx;
		color: #3e3e3e;
	}

	.box-input {
		border-bottom: 1rpx solid #f3f2f2;
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		align-items: center;
		padding: 10rpx;
		margin-bottom: 30rpx;
		justify-content: left;
		font-size: 60rpx;
	}

	.box-input .ms {
		font-size: 40rpx;
	}

	.box-input .inputs {
		height: 60rpx;
		font-size: 40rpx;
	}

	.box-input .inputs-mobile {
		height: 60rpx;
		font-size: 34rpx;
	}

	.box-notice {
		font-size: 24rpx;
		color: #8e8d8d;
		margin-bottom: 60rpx;
	}

	.withdraw-nums {
		color: #f23030;
		display: inline;
	}

	.withdraw-txt {
		margin-top: 40rpx;
		margin-left: 20rpx;
		color: #bbb9b0;
		font-size: 22rpx;
		line-height: 44rpx;
	}
</style>
